<template>
	<view class="storeBox" id="storeBox" ref="storeBox">
		<view class="topMenu">
			<view style='display: flex;'>
				<view class="tit-txt" :class="{ active: tabType == 'order' }" @click="goToPage('order')">
					<view class="">订单</view>
					<view class="hr"></view>
				</view>
				<view class="tit-txt" :class="{ active: tabType == 'data' }" @click="goToPage('data')">
					<view class="">数据</view>
					<view class="hr"></view>
				</view>
				<view class="tit-txt" :class="{ active: tabType == 'control' }" @click="goToPage('control')">
					<view class="">管理</view>
					<view class="hr"></view>
				</view>
			</view>
		</view>
		<template v-if="realNameLogin != '0'">
			<view class="listBox">
				<view class="list">
					<view class="">姓名</view>
					<view class="">电话</view>
					<view class="">添加时间</view>
					<view class="">操作</view>
				</view>
				<view class="list" v-for="(item, index) in list" :key="item.name">
					<view class="">{{ item.nameTakingMeal }}</view>
					<view class="">{{ item.phoneTakingMeals }}</view>
					<view class="">{{ item.createTime }}</view>
					<view class="">
						<view class="" @click="showMemberModal('edit', item)">
							编辑
						</view>
						<view class="" @click="showDelModal(item.id)">
							删除
						</view>
					</view>
				</view>
			</view>
			<view class="conreolBox">
				<view class="button" @click="checkFile">
					导入
				</view>
				<view class="button" @click="showMemberModal('add')">新增</view>
			</view>
		</template>
		<template v-else>
			<view class="nullBox">
				<u-empty text="没有访问权限" mode="page"></u-empty>
			</view>
		</template>

		<member-modal ref="memberModalRef" @loadData="_getMemberList"></member-modal>
		<u-toast ref="uToast"></u-toast>
		<view class="delBox">
			<u-popup v-model="delvisible" mode="center" :closeable="true">
				<view class="delMain">
					<view class="content">确定删除吗?</view>
					<view class="control">
						<view class="" @click="delvisible = false">取消</view>
						<view class="" @click="delSubmit">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import {
	getCopanyInfoById,
	getCompanyMemberList,
	delCompanyMember
} from '@/utils/req/api.js';
import MemberModal from '@/components/company/memberModal.vue'
import {
	formatDate,
} from '@/utils/commen.js'
export default {
	components: {
		MemberModal
	},
	data() {
		return {
			tabType: 'control',
			companyId: '',
			pageSize: 99999,
			pageNo: 1,
			realNameLogin: '',
			list: [],
			delvisible: false,
			delId: ''
		};
	},

	created() { },
	onLoad({
		id
	}) {
		if (id) {
			uni.setStorageSync('companyId', id);
		}
	},
	onShow() {
		this.companyId = uni.getStorageSync('companyId');
		this._getCopanyInfoById();
	},
	methods: {

		checkFile() {
			var input = document.createElement('input');
			input.id = 'files'
			input.type = 'file';
			input.accept = 'xlsl,xls';
			input.style.display = 'none';
			this.$refs.storeBox.$el.appendChild(input);
			input.onchange = async (e) => {
				// this.fileName = event.path[0].files[0].name;
				console.log('event', e.target.files[0]);
				let fullUrl = getApp().globalData.BASE_URL
				let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				uni.uploadFile({
					url: fullUrl + '/hc/hcUser/importExcelByCompany',
					name: 'file',
					formData: {
						companyId: this.companyId,
						file: e.target.files[0]
					},
					header: {
						'X-Access-Token': token,
					},
					success: res => {
						let _res = JSON.parse(res.data);
						console.log('上传res', _res);
						const _input = document.getElementById('files');
						_input.parentNode.removeChild(_input);
						if (_res.success) {
							this._getMemberList();
						} else {
							this.$showToast.call(this, _res.message, 'default', 4000);
						}
					},
					fail(error) {
						console.log('报错err', error);
					},
				})
			}
			input.click();
		},
		async _getCopanyInfoById() {
			let res = await getCopanyInfoById({
				id: this.companyId
			});
			console.log('详情', res);
			let {
				realNameLogin
			} = res.data.result;
			this.realNameLogin = realNameLogin;
			if (this.realNameLogin) {
				this._getMemberList();
			}
		},
		async _getMemberList() {
			let res = await getCompanyMemberList({
				companyId: this.companyId,
				pageNo: this.pageNo,
				pageSize: this.pageSize,
			})
			console.log('员工列表', res);
			this.list = res.data.result.records;
		},
		showMemberModal(type, record) {
			console.log('this.$refs', this.$refs.memberModalRef);
			this.$refs.memberModalRef.show(type, record);
		},
		showDelModal(id) {
			this.delId = id;
			this.delvisible = true
		},
		async delSubmit() {
			let res = await delCompanyMember({
				id: this.delId
			});
			console.log('删除res', res);
			if (res.data.success) {
				this.$showToast.call(this, '删除成功', 'default', 4000);
				this.delvisible = false;
				this._getMemberList();
			} else {
				this.$showToast.call(this, res.data.message, 'default', 4000)
			}
		},
		goToPage(type) {
			let url;
			switch (type) {
				case "order":
				case "data":
					url = '/pages/company/orderSummary';
					break;
				case "control":
					url = '/pages/company/control';
					break;
			}
			uni.navigateTo({
				url
			})
		}
	}
};
</script>


<style lang="scss" scoped>
$success-color: #70B603;
$red-color: #f32d4a;

page {
	padding-bottom: 200rpx;
}

.storeBox {
	min-height: 100vh;
	background-color: #fff;
}

.topMenu {
	background-color: #fff;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.tit-txt {
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);

		>view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #f1b825;
			margin: 0 auto;
			margin-top: 10rpx;
			display: none;
		}
	}

	.active {
		color: #000;
		font-size: 46rpx;
		font-weight: bold;
	}

	.text-box {
		color: #8f8b8b;
		font-size: 32rpx;
	}
}

.empty-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 600rpx;
}

.listBox {
	margin: 10rpx;
}

.list {
	width: 100%;
	@include flexs(flex-start, center);
	border: 1px solid #eee;

	>view {
		// flex: 1;
		text-align: center;
		font-size: 26rpx;
		padding: 10rpx 0;

		&:nth-child(1) {
			flex-basis: 150rpx;
			flex-shrink: 0;
		}

		&:nth-child(2) {
			flex-basis: 200rpx;
			flex-shrink: 0;
		}

		&:nth-child(3) {
			flex: 1;
		}

		&:nth-child(4) {
			flex-basis: 150rpx;
			flex-shrink: 0;
		}

		&:last-child {
			@include flexs(center, center);

			view:last-child {
				margin-left: 10rpx;
			}
		}
	}

	&:nth-child(1) {
		>view {
			font-weight: bold;
			font-size: 30rpx;
		}
	}
}

.conreolBox {
	position: fixed;
	bottom: 100rpx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.button {
		width: 45%;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #fa690a;
		line-height: 2;
		text-align: center;
		padding: 10rpx 0;
	}
}

.nullBox {
	padding: 80px 0;
}

.delMain {
	padding: 50rpx 0;

	.content {
		padding: 100rpx 0;
		text-align: center;
		font-size: 32rpx;
		letter-spacing: 2rpx;
	}

	.control {
		@include flexs(space-around, center);

		view {
			width: 40%;
			border-radius: 10rpx;
			line-height: 2;
			font-size: 28rpx;
			text-align: center;
			border: 1px solid #eee;
			padding: 10rpx 0;

			&:nth-child(2) {
				background-color: #fa690a;
				color: #fff;
			}
		}
	}
}

.delBox {

	/deep/.u-mode-center-box {
		border-radius: 10rpx !important;
		overflow: hidden;
	}

	/deep/.u-drawer__scroll-view {
		width: 90vw;
		max-height: 50vh;
	}
}
</style>